<template>
  <!-- 跳转页面,方式1-通过push(字符串) -->
  <van-cell :title="article.title" @click="$router.push('/article/'+article.art_id)">
  <!-- 跳转页面,方式2-通过push(对象) -->
  <!-- <van-cell :title="article.title" @click="$router.push({name:'article', params: {articleId: article.art_id}})"> -->
    <!-- 情况1-没有图片 -->
    <!-- 情况2-有图片,只要1张 -->
    <van-image
      slot="default"
      v-if="article.cover.type === 1"
      :src="article.cover.images[0]"
    ></van-image>
    <!-- 情况3-有图片，只要3张 -->
    <div slot="label" class="cover-wrap" v-if="article.cover.type === 3">
      <van-image
        v-for="(item, index) in article.cover.images"
        :key="index"
        :src="item"
      ></van-image>
    </div>
    <div slot="label" class="label-info-wrap">
      <span>{{ article.aut_name }}</span>
      <span>{{ article.comm_count }}评论</span>
      <span>{{ article.pubdate | relativeTime }}</span>
    </div>
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {

    }
  },
  components: {},
  created () {},
  mounted () {},
  methods: {
  }
}
</script>

<style lang="less" scoped>
.van-cell__title {
  font-size: 32px;
  color: #3a3a3a;
}
.van-cell__value {
  width: 232px;
  height: 146px;
  flex: unset;
}
.label-info-wrap {
  span {
    margin-right: 15px;
  }
}
.cover-wrap {
  display: flex;
  .van-image {
    flex: 1;
    height: 146px;
  }
}
</style>
